<template>
  <div class="customer-container">
    <el-button type="primary" @click="exportAllToExcel">批量导出(Excel)</el-button>
    <el-button type="success" @click="exportChangeToExcel">选择导出(Excel)</el-button>
    <el-button type="danger">批量删除</el-button>

    <el-table
      :data="customerList"
      style="width: 100%; margin-top: 12px"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="120" />
      <!-- <el-table-column label="负责人" width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.ownerDO.name }}
        </template>
      </el-table-column>
      <el-table-column label="所属活动" width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.activityDO.name }}
        </template>
      </el-table-column>
      <el-table-column prop="fullName" label="姓名" show-overflow-tooltip />
      <el-table-column label="称呼" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.appellationDO.typeValue }}
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机" show-overflow-tooltip />
      <el-table-column prop="weixin" label="微信" show-overflow-tooltip />
      <el-table-column label="是否贷款" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.needLoanDO.typeValue }}
        </template>
      </el-table-column>
      <el-table-column label="意向状态" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.intentionStateDO.typeValue }}
        </template>
      </el-table-column>
      <el-table-column label="意向产品" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.intentionProductDO.name }}
        </template>
      </el-table-column>
      <el-table-column label="线索状态" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.stateDO.typeValue }}
        </template>
      </el-table-column>
      <el-table-column label="线索来源" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.sourceDO.typeValue }}
        </template>
      </el-table-column>
      <el-table-column prop="nextContactTime" label="下次联系时间" show-overflow-tooltip /> -->
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleView(scope.row.id)">
            详情
          </el-button>
          <el-button type="primary" size="small" @click="handleEdit(scope.row.id)">
            编辑
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="total"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      class="pagination"
      @change="pageChange"
      @prev-click="toPage"
      @next-click="toPage"
    />
  </div>
</template>

<script setup lang="ts" name="Customer">
import httpRequest from '@/http/httpRequest'
import axios from 'axios'
import { onMounted, ref } from 'vue'

// type Props = {}
// defineProps<Props>()
// const emit = defineEmits([])
// const router = useRouter()
// const route = useRoute()
interface ICustomer {
  /**
   * 主键，自动增长，客户ID
   */
  id: number | null

  /**
   * 线索ID
   */
  clueId: number | null

  /**
   * 选购产品
   */
  product: number | null

  /**
   * 客户描述
   */
  description: string

  /**
   * 下次联系时间
   */
  nextContactTime: string

  /**
   * 创建时间
   */
  createTime: string

  /**
   * 创建人
   */
  createBy: number | null

  /**
   * 编辑时间
   */
  editTime: string

  /**
   * 编辑人
   */
  editBy: number | null
}
interface IUser {
  id: number | null
  name: number | null
}
let customerList = ref<ICustomer[]>([])
const exportAllToExcel = () => {
  let token = window.localStorage.getItem('dlyk_login_token')
  let iframe = document.createElement('iframe')
  iframe.src = axios.defaults.baseURL + '/api/customer/exportExcel?token=' + token
  iframe.style.display = 'none'
  document.body.appendChild(iframe)
}
const exportChangeToExcel = () => {}
const selectionChange = (newSelection: any[]) => {}
const handleView = (id: number) => {
  // router.push({
  //   path: '/home/market-activity-detail/' + id,
  // })
}
const handleEdit = (id: number) => {
  // router.push({
  //   path: '/home/market-activity-edit/' + id,
  // })
}
const handleDelete = (id: number) => {}
let total = ref(0)
let pageSize = ref(10)
let pageChange = (currentPage: number, pageSize: number) => {
  getData(currentPage, pageSize)
}

let toPage = (currentPage: number) => {
  getData(currentPage, pageSize.value)
}

onMounted(() => {
  getData(1)
})
const getData = (currentPage: number, pageSize: number = 10) => {
  httpRequest
    .doGet('/api/customer', {
      currentPage: currentPage,
      pageSize: pageSize,
    })
    .then((res) => {
      if (res.data.code == 200) {
        customerList.value = res.data.data.list || []
        total.value = res.data.data.total
      }
    })
    .catch((error) => {})
}
</script>

<style scoped lang="scss">
.customer-container {
  min-height: 100%;
}
</style>
